/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div :class="['search-content', onePageVis ? '' : 'search-content-hide']">
    <div :class="['search-header', searchVis ? '' : 'search-header-hide']">
      <div class="search-input">
        <input type="text" name="search" maxlength="256" placeholder="请输入搜索内容" v-model="searchVlaue">
        <div class="clear" @click="clearSearchValue" title="清空" v-show="searchVlaue">
          <i class="iconfont icon-clear"></i>
        </div>
      </div>
      <button class="search-button" @click="handlerSearchVis">
        <i v-show="!searchVis" class="iconfont icon-search"></i>
        <i v-show="searchVis" class="iconfont icon-arrow-double-left"></i>
      </button>
    </div>
    <!-- <div class="back-btn">
      <i class="iconfont icon-qihedingzhengshou"></i>
    </div> -->
    <div :class="['search-main', searchVis ? '' : 'search-main-hide']">
      <ul>
        <li v-for="(item, index) in showResult" :key="index" @click="handlerSearchItem(item)">
          <div class="left"><img :src="item.litpic" :alt="item.name"></div>
          <div class="right">
            <b class="title">{{item.name}}</b>
            <b class="item">
              <span class="label">状态</span>
              <span class="value">{{item.status | getCN}}</span>
            </b>
            <b class="item">
              <span class="label">地址</span>
              <span class="value">{{item.houseaddress}}</span>
            </b>
          </div>
        </li>
      </ul>
      <div class="no-content" v-show="!showResult || showResult.length<1">----没有更多内容----</div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import {reqSearchFamily} from '../../api/index.js';

export default {
  props: {
    onePageVis: Boolean,
    allData: Array,
    handlerSearchItem: Function
  },
  data() {
    return {
      searchVis: false,
      searchVlaue: "",
      searchResult: [],
      showResult: this.allData
    };
  },
  // computed: {
  //   showResult: function(){
  //     return this.searchVlaue ? this.searchResult : this.allData;
  //   }
  // },
  watch: {
    searchVlaue: function(data) {
      this.handlerSearch(data);
    },
    allData: function(data) {
      this.showResult = data;
    }
  },
  methods: {
    handlerSearchVis() {
      this.searchVis = !this.searchVis;
    },
    // 搜索
    handlerSearch: _.debounce(async function(data) {
      const self = this;
      if (data) {
        // this.showResult = [];
        const result = await reqSearchFamily({seqno: self.$router.history.current.query.seqno, keyWord: data});
        if(result.code === 1){
          this.showResult =result.data.allItemInfo;
        }
      } else {
        this.showResult = this.allData;
      }
    }, 500),
    clearSearchValue() {
      this.searchVlaue = "";
    }
  },
  components: {}
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";
@searchHeight: 3vw;

.search-content {
  position: fixed;
  z-index: 10;
  top: 15%;
  left: 5vw;
  transition: all ease-out 0.6s;
}
.search-content-hide {
  left: -95vw;
}
.search-header {
  transition: all ease-out 0.6s;
  .search-input {
    display: inline-block;
    float: left;
    position: relative;
    overflow: hidden;
    transition: all ease-out 0.6s;
    input {
      transition: all ease-out 0.6s;
      box-sizing: border-box;
      border: 0;
      padding: 0.5vw 0;
      border-left: 0.5vw solid transparent;
      border-right: 2vw solid transparent;
      font-size: 1.2rem;
      height: @searchHeight;
      color: #333;
      position: relative;
      border-radius: 0.2rem 0 0 0.2rem;
      width: 18vw;
    }
    .clear {
      right: 0;
      cursor: pointer;
      position: absolute;
      width: 2vw;
      height: @searchHeight;
      line-height: @searchHeight;
      top: 0;
      color: rgba(0, 0, 0, 0.15);
      font-size: 1.5rem;
    }
  }
  .search-button {
    transition: all ease-out 0.6s;
    display: inline-block;
    pointer-events: auto;
    width: @searchHeight;
    height: @searchHeight;
    float: left;
    border: 0;
    padding: 0;
    color: #fff;
    cursor: pointer;
    border-radius: 0 0.2vw 0.2vw 0;
    -webkit-box-shadow: 0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.15);
    box-shadow: 0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.15);
    background: @primary;
    outline: none;
    i {
      font-size: 1.8rem;
    }
  }
}

.search-header-hide {
  .search-input {
    input {
      width: 0;
      border-left: 0 solid transparent;
      border-right: 0 solid transparent;
    }
  }
  .search-button {
    width: @searchHeight;
    border-radius: @searchHeight;
  }
}

.search-main {
  position: absolute;
  top: 3.5vw;
  width: 22vw;
  left: 0;
  background: #fff;
  overflow: hidden;
  z-index: 10;
  color: #000;
  padding: 0.5vw;
  padding-right: 0;
  transition: all ease-out 0.6s;
  ul {
    width: 100%;
    overflow: auto;
    max-height: 34vw;
    transition: all ease-out 0.6s;
    li {
      display: flex;
      align-content: center;
      border-bottom: 1px dotted @font-regular;
      padding: 0.5vw;
      box-sizing: content-box;
      cursor: pointer;
      &:hover {
        background: @font-regular;
      }
      .left {
        flex: 3;
        img {
          width: 100%;
          height: 100%;
          max-width: 100%;
          max-height: 100%;
          padding-right: 0.5vw;
          box-sizing: border-box;
        }
      }
      .right {
        flex: 7;
        overflow: hidden;
        .title {
          display: block;
          font-size: 1rem;
          font-weight: bold;
          text-align: left;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          line-height: 1.3vw;
        }
        .item {
          display: block;
          text-align: left;
          span {
            line-height: 1.3vw;
          }
          .label,
          .value {
            display: inline;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .label:after {
            content: ":";
            margin: 0 0.3vw 0 0.1vw;
            position: relative;
            top: -0.15vw;
          }
        }
      }
    }
  }
}

.search-main-hide {
  width: 0;
  height: 0;
  padding: 0;
  ul {
    max-height: 0;
    height: 0;
  }
}

.no-content {
  text-align: center;
  font-size: 1.2rem;
  color: @font-black;
}

// .back-btn{
//   position: fixed;
//   top: 2vw;
//   left: 2vw;
//   cursor: pointer;
//   i{
//     font-size: 3rem;
//   }
// }
</style>
